<template>
  <div class="footer">
    <ul>
      <router-link to="/home" tag="li">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </router-link>
      <router-link to="/kind" tag="li">
        <span class="iconfont icon-fenlei"></span>
        <p>分类</p>
      </router-link>
      <router-link to="/user" tag="li">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
      </router-link>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'
Vue.use(Icon)
export default {

}
</script>

<style lang="scss">
  .footer {
    height: .5rem;
    background-color: #fcfcfc;
    width: 100%;
    ul {
      width:100%;
      height:100%;
      display: flex;
      li {
        flex:1;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &.router-link-active {
          color: #f09;
        }
        span {
          margin-top:.02rem;
          font-size: .24rem;
        }
        p {
          font-size: .12rem;
          margin-top:.02rem;
        }
      }
    }
  }
</style>
